<template>
  <view class=" " style="height: 100%; width: 100%">
    <view
      class="flex pt-2 pb-3 pl-2 flex-column justify-center bg-white"
      style="position: fixed; overflow: hidden; z-index: 100; width: 100%"
    >
      <view class="" style="height: 36px">
        <view class="">
          <image
            src="https://digital.essc.top/dist/zjl_icon/zljlogo.png"
            style="width: 150rpx; margin-top: 10rpx"
            mode="widthFix"
          >
          </image>
        </view>
      </view>
      <!-- <view
        class="bg-white flex justify-center"
        style="
          width: 94%;
          border-radius: 35rpx;
          height: 70rpx;
          overflow: hidden;
          border: 1px solid green;
        "
      >
        <view class="flex justify-between">
          <view class="flex align-center">
            <uni-icons
              class="ml-2 mr-2"
              size="23"
              color="green"
              type="search"
            ></uni-icons>
            <input
              placeholder-class="font"
              placeholder="沙糖桔"
              type="text"
              style="width: 460rpx"
            />
          </view>
          <view class="flex align-center">
            <button
              @click=""
              type="default"
              style="
                border-radius: 30rpx;
                height: 55rpx;
                line-height: 55rpx;
                background-color: #26c334;
                color: white;
              "
              size="mini"
              class="uni-button font"
              :class="'bg-' + color"
            >
              搜索
            </button>
          </view>
        </view>
      </view> -->
    </view>
    <view
      style="height: 61px; background-color: #f5f5f5 ; padding;:0 0 10rpx 0"
    ></view>
    <view class="">
      <view :class="'bg-' + color">
        <view class="content bg-white">
          <!-- 首页轮播图 -->
          <uni-swiper-dot
            class="uni-swiper-dot-box"
            :info="info"
            :current="current"
            :mode="mode"
            :dots-styles="dotsStyles"
            field="content"
          >
            <swiper
              circular
              class="swiper-box"
              @change="change"
              :current="swiperDotIndex"
              autoplay
              :interval="3000"
            >
              <swiper-item
                v-for="(item, index) in swiperData"
                :key="index"
                class="flex justify-center"
              >
                <image
                  v-if="swiperData.length != 0"
                  :src="Domain_IMG + item.Picture_URL"
                  mode=""
                  style="width: 96%; border-radius: 25rpx"
                  class=""
                >
                </image>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>

          <!-- 推荐列表 -->
          <!-- <view class="flex my-2" style="justify-content: space-around">
						<view @click="Go(item.url)" v-for="(item,i) in FourData" :key="i"
							class="flex align-center flex-column" style="background-color:#b6f1c3;padding: 10rpx 16rpx;border-radius: 35rpx;opacity: 0.7;">
							<text>{{item.title}}</text>
						</view>
					</view> -->

          <!-- 商品列表 -->
          <!-- #ifdef APP -->
          <view
            class="flex my-2 justify-center"
            style="width: 100%; height: 150rpx"
          >
            <view
              class="flex text-white align-center justify-between bg-white"
              style="border-radius: 20rpx; width: 97%; flex-wrap: wrap"
            >
              <view
                @click="Go(item.url)"
                v-for="(item, i) in ListData_APP"
                :key="i"
                class="flex align-center flex-column"
                style="width: 20%; height: 100%; justify-content: space-evenly"
              >
                <image
                  style="width: 70rpx"
                  :src="Domain_ICON + item.pic"
                  mode="widthFix"
                ></image>
                <text style="color: black; font-size: 12px">{{
                  item.title
                }}</text>
              </view>
            </view>
          </view>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <view
            class="flex my-2 justify-center"
            style="width: 100%; height: 150rpx"
          >
            <view
              class="flex text-white align-center justify-between bg-white"
              style="border-radius: 20rpx; width: 97%; flex-wrap: wrap"
            >
              <view
                @click="Go(item.url)"
                v-for="(item, i) in ListData"
                :key="i"
                class="flex align-center flex-column"
                style="width: 20%; height: 100%; justify-content: space-evenly"
              >
                <image
                  style="width: 70rpx"
                  :src="Domain_ICON + item.pic"
                  mode="widthFix"
                ></image>
                <text style="color: black; font-size: 12px">{{
                  item.title
                }}</text>
              </view>
            </view>
          </view>
          <!-- #endif -->

          <!--新闻资讯  -->
          <view class="flex my-3 justify-center" style="width: 100%">
            <view
              class="flex align-center bg-white"
              style="border-radius: 20rpx; width: 97%; height: 150rpx"
            >
              <view
                class="text-success font-weight-bold zxLeft bg-success zix"
                @click="Go('/pages/consult/consultIndex')"
              >
                <view> 资讯 </view>
                <view> 中心 </view>
              </view>
              <view
                class="flex flex-column"
                style="
                  width: 550rpx;
                  height: 100%;
                  box-sizing: border-box;
                  margin: 0 0 0 20rpx;
                  justify-content: space-evenly;
                "
              >
                <view
                  class="flex align-center"
                  v-for="(item, index) in Domestic_list"
                  :key="index"
                  @click="
                    Go('/pages/consult/details?id=' + item.News_SerialNumber)
                  "
                >
                  <text
                    style="
                      color: black;
                      font-size: 30rpx;
                      display: inline-block;
                    "
                    class="ml-1 text-container"
                    >{{ item.News_Name }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <!-- 推荐导航 -->
          <view class="flex my-2" style="justify-content: space-evenly">
            <view
              @click="selectActive(item.id)"
              v-for="(item, i) in ShopData"
              :key="i"
              :class="Active == item.id ? 'border-bottom-' + color : ''"
              class="flex align-center justify-center"
              style="
                background-color: #fff;
                border-radius: 10rpx;
                width: 22%;
                padding: 20rpx;
              "
            >
              <text>{{ item.title }}</text>
            </view>
          </view>
          <!--  -->
          <view class=" ">
            <Goods v-if="Active == 0"></Goods>
            <Tender v-if="Active == 1"></Tender>
            <Need v-if="Active == 2"></Need>
          </view>
        </view>
      </view>
    </view>
    <!-- #ifdef APP || MP-WEIXIN -->
    <view
      v-if="token == ''"
      :class="'text-white w-100 flex align-center justify-between px-2'"
      style="
        background-color: rgba(0, 0, 0, 0.4);
        height: 120rpx;
        position: fixed;
        bottom: 0rpx;
      "
    >
      <text style="font-size: 14px">登录获取最新木耳,菌类交易行情</text>
      <view class="pr-4">
        <button
          @click="goLogin"
          type="default"
          style="
            border-radius: 30rpx;
            height: 60rpx;
            line-height: 60rpx;
            background-color: #f87c20;
            color: white;
          "
          size="mini"
          class="uni-button"
          :class="'bg-' + color"
        >
          立即登陆
        </button>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view
      v-if="token == ''"
      :class="'text-white w-100 flex align-center justify-between px-2'"
      style="
        background-color: rgba(12, 9, 9, 0.4);
        height: 130rpx;
        position: fixed;
        bottom: 90rpx;
      "
    >
      <text style="font-size: 14px">登录获取最新木耳,菌类交易行情</text>
      <view class="pr-4">
        <button
          @click="goLogin"
          type="default"
          style="
            border-radius: 30rpx;
            height: 60rpx;
            line-height: 60rpx;
            background-color: #f87c20;
            color: white;
          "
          size="mini"
          class="uni-button"
          :class="'bg-' + color"
        >
          立即登录
        </button>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
let _self;
const app = getApp();
import Goods from "@/components/Goods/Goods.vue";
import Tender from "@/components/Tender/Tender.vue";
import Need from "@/components/Need/Need.vue";
import { NewsAll } from "@/api/information.js";
export default {
  data() {
    return {
      barHeight: 25,
      token: "",
      type: true,
      colors: "",
      color: uni.getStorageSync("ThemeColors")
        ? uni.getStorageSync("ThemeColors")
        : "green",
      Domain_ICON: app.globalData.Domain_ICON,
      Domain_IMG: app.globalData.Domain_IMG,
      title: "Hello",
      Active: 0,
      value: "",
      info: [],
      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: "dot",
      dotsStyles: {},
      swiperDotIndex: 0,
      FourData: [
        {
          title: "推荐",
          url: "/pages/index/AllGoods",
        },
        {
          title: "水果",
          url: "/pages/Market/Market",
        },
        {
          title: "蔬菜",
          url: "/pages/Trade/Trade",
        },
        {
          title: "禽畜肉类",
          url: "/pages/LogisticsFinance/LogisticsFinance",
        },
        {
          title: "水产",
          url: "/pages/Traceability/Traceability",
        },
      ],
      swiperData: [],
      ShopData: [
        {
          title: "好货推荐",
          id: 0,
        },
        {
          title: "今日采购",
          id: 1,
        },
        {
          title: "热门供应",
          id: 2,
        },
      ],
      TJData: [],
      ListData: [
        {
          title: "交易服务",
          pic: "/chengjiao.png",
          url: "/pages/My/My",
        },
        {
          title: "溯源服务",
          pic: "/suyuanmaguanli.png",
          url: "/pages/index/Traceabilityservices",
        },
        // {
        //   title: "金融服务",
        //   pic: "/jinrong.png",
        //   url: "/pages/LogisticsFinance/financeIndex",
        // },
        {
          title: "数据大屏",
          pic: "/sjdp.png",
          url: "/pages/index/web_view",
        },
        {
          title: "其他服务",
          pic: "/fenlei.png",
          url: "/pages/index/Othercertifications",
        },
        // {
        // 	title: '寄售大厅',
        // 	pic:'/static/zf.png',
        // 	url: '/pages/Market/Market',
        // },
      ],
      ListData_APP: [
        {
          title: "交易服务",
          pic: "/chengjiao.png",
          url: "/pages/My/My",
        },
        {
          title: "溯源服务",
          pic: "/suyuanmaguanli.png",
          url: "/pages/index/Traceabilityservices",
        },
        {
          title: "金融服务",
          pic: "/jinrong.png",
          url: "/pages/LogisticsFinance/financeIndex",
        },
        {
          title: "数据大屏",
          pic: "/sjdp.png",
          url: "/pages/index/web_view",
        },
        {
          title: "其他服务",
          pic: "/fenlei.png",
          url: "/pages/index/Othercertifications",
        },
        // {
        // 	title: '寄售大厅',
        // 	pic:'/static/zf.png',
        // 	url: '/pages/Market/Market',
        // },
      ],
      form: {
        News_Type: "2", //type 默认空是全部
        Row_Status: "1", //状态
        page: 1, //页数
        limit: 2, //每页数据条数
      },
      Domestic_list: [],
      clientInfo: {},
    };
  },
  onLoad() {
    this.getSwiperData();
    this.getData();
    console.log(this.FourData);
    if (this.color == "green") {
      this.colors = "#39bf3e";
    }
    this.Domestic();
  },
  onShow() {
    if (uni.getStorageSync("token") != "") {
      this.token = uni.getStorageSync("token");
    } else {
      this.token = "";
    }
    if (uni.getStorageSync("yinsi") != 1) {
      uni.showModal({
        title: "服务协议和隐私政策",
        content:
          "请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能",
        success(res) {
          if (res.cancel) {
            uni.onBackPress(function () {
              plus.runtime.quit();
            });
          }
          if (res.confirm) {
            uni.setStorageSync("yinsi", 1);
            uni.navigateTo({
              url: "/pages/My/Aboutus/Privacy_Policy",
            });
          }
        },
      });
    }
  },
  components: {
    Goods,
    Tender,
    Need,
  },
  methods: {
    async Domestic() {
      const res = await NewsAll({
        data: this.form,
      });
      console.log(res);
      this.Domestic_list = res.tableData;
    },
    change(e) {
      this.current = e.detail.current;
    },
    getData() {
      uni.request({
        url: app.globalData.Domain_Name + "/GoodsFileInquiry", //仅为示例，并非真实接口地址。
        data: {
          Data: "category",
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded", //自定义请求头信息
        },
        success: (res) => {
          this.TJData = res.data;
          console.log(res);
        },
      });
    },
    handoff() {
      this.type = !this.type;
      this.Active = 0;
      if (this.type) {
        this.ShopData = [
          {
            title: "商城",
            id: 0,
          },
          {
            title: "采购交易",
            id: 2,
          },
        ];
      } else {
        this.ShopData = [
          {
            title: "商城",
            id: 0,
          },
          {
            title: "寄售交易",
            id: 1,
          },
        ];
      }
    },
    selectStyle(index) {
      this.dotsStyles = this.dotStyle[index];
      this.styleIndex = index;
    },
    selectActive(i) {
      this.Active = i;
    },
    Go(url) {
      if (url === "/pages/My/My") {
        uni.switchTab({
          url: "/pages/My/My",
        });
      } else {
        uni.navigateTo({
          url,
        });
      }
    },
    getSwiperData() {
      uni.request({
        //获取所有招标
        url: app.globalData.Domain_Name + "/GoodsFileInquiry",
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        method: "POST",
        data: {
          Data: "group_rotation_pic",
        },
        success: (res) => {
          console.log(res);
          this.swiperData = res.data;
          this.info = res.data;
        },
      });
    },
    goLogin() {
      uni.navigateTo({
        url: "/pages/My/Login",
      });
    },
  },
};
</script>
<!-- #ddfbe6 -->
<style lang="scss">
.zix {
  padding: 11px 0;
  width: 180rpx;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.zxLeft {
  border-radius: 20rpx 0 0 20rpx;

  view {
    text-align: center;
    color: #fff;
  }
}

.text-container {
  width: 100%;
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏超出部分的文本 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  display: inline-block;
}

.content {
  padding: 10rpx 20rpx 20rpx 20rpx;
  background-color: #f5f5f5;
}

.status-bar {
  width: 100%;
  height: var(--status-bar-height);
}

.swiper-box {
  height: 200px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #fff;
}

.borders {
  border-bottom: 4rpx solid #fc7c08;
}

$nav-height: 30px;

.city {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  // width: 160rpx;
  margin-left: 4px;
}

.input-view {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  // width: 500rpx;
  flex: 1;
  background-color: #f8f8f8;
  height: $nav-height;
  border-radius: 15px;
  padding: 0 15px;
  flex-wrap: nowrap;
  margin: 7px 0;
  line-height: $nav-height;
  width: 100%;
}

.input-uni-icon {
  line-height: $nav-height;
}

.nav-bar-input {
  height: $nav-height;
  line-height: $nav-height;
  /* #ifdef APP-PLUS-NVUE */
  width: 370rpx;
  /* #endif */
  padding: 0 5px;
  font-size: 12px;
  background-color: #f8f8f8;
}
</style>